<template>
	<view style="" class="feedBackBox">
		<view style="padding: 4%;">
			<text class="matterText">请选择你需要反馈的问题种类</text>
			<view class="matterSection">
				<u-subsection :list="list" :current="0" mode="subsection" active-color="#4387ca" height="60" @change="sectionChange"></u-subsection>
			</view>
		</view>
		<view class="feedbackTextarea">
			<textarea class="input" @input="onKeyInput" :placeholder="placeholder" v-model="feedbackText" style="padding: 4%;"/>
		</view>
		<u-loading size="40" :show="isShow" color="#4387ca" style="position: absolute;margin-left: 45%;margin-top: -10%;"></u-loading>
		<view class="feedBackImgBox">
			<view class="flex-row">
				<image src="../../static/bi.png"></image>
				<text>请上传相关问题的截图或图片</text>
			</view>
			<view class="m-t2">
				<u-upload ref="uUpload" 
					:action="action"
					:max-size="2 * 1024 * 1024" 
          :header="myToken"
					max-count="6"
          @on-success="picSrc"
          @on-remove="removePic">
				</u-upload>
			</view>
			<u-button type="primary" :custom-style="customStyle" @click="submit" >提交</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex' //引入mapState
	import { putSendFeedBackMsg } from "@/common/js/api/api.js";
	export default {
    onLoad() {
      uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
      var taken = uni.getStorageSync('token')
      setTimeout(() => {
        this.feedbackText = '';
        this.$refs.uUpload.clear();
        this.imgSources = [];
        uni.stopPullDownRefresh();
      }, 500);
    },
		data() {
			return {
				list: [
					{
						name: '账号问题'
					}, 
					{
						name: '充电故障'
					}, 
					{
						name: '活动问题'
					},
					{
						name: '其他问题'
					}
				],
				action: 'http://172.22.36.77:8000/api/feedback/upload',
				customStyle: {
					width: '180px',
					marginTop: '20px'
				},
				isShow: false,
				feedbackText: '',
				placeholder: '请输入您的意见或建议,我们将为您不断改进',
				matterType: '账号问题',
				imgSrc: [],
				imgSources: []
			}
		},
		computed: {
			...mapState({
				openId: state => state.adminUser.openId,
				token: state => state.adminUser.token
			}),
      myToken: () => {
        var headers = {}
        headers.Authorization = uni.getStorageSync('token')
        return headers
      }
		},
		methods: {
			sectionChange(e) {
				this.matterType = this.list[e].name;
			},
			onKeyInput(e) {
				if(e.detail.value == '') {
					e.detail.value = '请输入您的意见或建议,我们将为您不断改进,不能少于五个字哦'
				}else{
					this.feedbackText = e.detail.value;
				}
			},
      picSrc(lists) {
        if(lists != null) {
          this.imgSources.push(lists.filePath);
        }
      },
      removePic(index,lists) {
        if(lists != null) {
          this.imgSources = []
          lists.forEach(item => this.imgSources.push(item.response.filePath))
        }
      },
			submit() {
				this.isShow = true;
				putSendFeedBackMsg({
					matterType: this.matterType,
					feedbackText: this.feedbackText,
					imgSources: this.imgSources
				}).then((resq) => {
					this.feedbackText = '';
					this.isShow = false;
					this.$refs.uUpload.clear();
					this.imgSources = [];
          this.$refs.uToast.show({
          	title: '提交成功',
          	type: 'success'
          })
				}).catch((err) => {
					console.log(err)
					this.isShow = false;
					this.$refs.uToast.show({
						title: '提交失败,请重新提交',
						type: 'error'
					})
					this.$refs.uUpload.clear();
					this.imgSources = [];
				});
			}
		}
	}
</script>

<style>
	
</style>
